<template>
	<view class="box">

		<view class="bg-img p-20" style="height: 576rpx;">
			<view class="u-flex u-row-left" style="margin-top: 200rpx;">
				<view style="border-radius: 50%; border: 5rpx solid #FFFFFF;width: 116rpx;height: 116rpx;">
					<image :src="userInfo.avatar" style="width: 116rpx;height: 116rpx;border-radius: 50%;" />
				</view>
				<view class="m-l-20" style="width: 400rpx;">
					<view style="font-weight: bold;">{{userInfo.nickname}}</view>
					<view class="u-flex u-row-left m-t-20" style="align-items: center;" v-if="statue!=2">
						<view class="btn1 u-flex u-row-left">
							<image src="../../static/icon/rz1.png" style="width: 24rpx;height: 24rpx;" />
							<text>未认证</text>
						</view>
						<view v-if="statue==0" style="color: #333333;font-size: 24rpx;margin-left: 20rpx;">登录获取更多信息
						</view>
					</view>
					<view class="u-flex u-row-left m-t-20" style="align-items: center;" v-else>
						<view class="btn3 u-flex u-row-left">
							<image src="../../static/icon/rz.png" style="width: 24rpx;height: 24rpx;" />
							<text>已认证</text>
						</view>
						<view style="color: #333333;font-size: 24rpx;margin-left: 20rpx;">{{userInfo.shopName}}</view>
					</view>
				</view>
				<view>
					<view v-if="statue==0" class="btn2" @click="goLogin()">立即登录</view>
					<view v-else-if="statue==1" class="btn2" @click="goAuth()">认证店铺</view>
					<view v-else-if="statue==2" class="btn2" @click="goSet()">编辑资料</view>
				</view>
			</view>
		</view>
		<view class="p-20">
			<view class="card">
				<view class="u-flex u-row-between m-b-20">
					<text style="color: #333333;font-size: 28rpx;">寄样管理</text>
					<navigator url="/pages/sub/samples" class="u-flex u-row-left">
						<text style="color:#999999;font-size:24rpx">查看全部</text><u-icon name="arrow-right"
							size="24rpx"></u-icon>
					</navigator>
				</view>
				<view class="u-flex u-row-between m-t-20">
					<navigator class="card-item" url="/pages/sub/samples?statue=0">
						<view style="font-size: 40rpx;">{{count.dsh}}</view>
						<view style="font-size: 24rpx;color: #666666;">待审核</view>
					</navigator>

					<navigator class="card-item" url="/pages/sub/samples?statue=1">
						<view style="font-size: 40rpx;">{{count.dfh}}</view>
						<view style="font-size: 24rpx;color: #666666;">待发货</view>
					</navigator>

					<navigator class="card-item" url="/pages/sub/samples?statue=2">
						<view style="font-size: 40rpx;">{{count.ysz}}</view>
						<view style="font-size: 24rpx;color: #666666;">运输中</view>
					</navigator>

					<navigator class="card-item" url="/pages/sub/samples?statue=3">
						<view style="font-size: 40rpx;">{{count.ywc}}</view>
						<view style="font-size: 24rpx;color: #666666;">已完成</view>
					</navigator>

					<navigator class="card-item" url="/pages/sub/samples?statue=-1">
						<view style="font-size: 40rpx;">{{count.yjj}}</view>
						<view style="font-size: 24rpx;color: #666666;">已拒绝</view>
					</navigator>
				</view>
			</view>
		</view>
        <view
        	style="background-color: #fff;border-radius: 20rpx;padding:0 30rpx;margin: 20rpx 20rpx 50rpx 20rpx;">
        	<view v-for="(item,index) in userfun" :key="index" @click="goCard(item)">
        		<view class="fun" v-if="item.url!='customer'">
        			<view style="display: flex;align-items: center;">
        				<image :src="item.image" mode=""
        					style="width: 48rpx;height: 48rpx;margin-right: 10rpx;"></image>
        				<view style="color: #000;font-size: 30rpx;">{{item.title}}</view>
        			</view>
        			<u-icon name="arrow-right" color="#c3c1c1" size="16"></u-icon>
        		</view>
        		<view v-else>
        			<button open-type="contact" class="btn" @click="goCard(item.url)">
        				<view style="display: flex;align-items: center;">
        					<image :src="item.image" mode=""
        						style="width: 48rpx;height: 48rpx;margin-right: 10rpx;"></image>
        					<view style="color: #000;font-size: 30 rpx;">{{item.title}}</view>
        				</view>
        				<u-icon name="arrow-right" color="#c3c1c1" size="16"></u-icon>
        			</button>
        		</view>
        	</view>
        </view>

	</view>

</template>

<script>
	import {
		samplesCount
	} from '@/api/shopAuth.js'
	export default {
		components: {

		},
		data() {
			return {
				statue: 0,
				userInfo: {
					avatar: '/static/icon/avatar1.png',
					nickname: '未登录'
				},
				count: {
					dsh: 0,
					dfh: 0,
					ysz: 0,
					ywc: 0,
					yjj: 0
				},
				userfun: [],
			}
		},
		onLoad() {


		},
		onShow() {
			let that = this
			this.getUserInfo((statue) => {
				that.statue = statue
				if (statue == 2) {
					samplesCount().then(res => {
						that.count = res.data
					})
				}
			})
		},
		computed: {

		},

		methods: {
			getUserInfo(callback) {

				let statue = this.$store.getters.isLogin ? 1 : 0;
				if (statue == 1) {
					let that = this
					this.$store.dispatch("USERINFO", true).then((res) => {
						that.userInfo = res
						callback(res.isAuth == 1 ? 2 : 1)
					});
				} else {
					callback(statue)
				}
			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/login/h5Login"
				})
			},
			goAuth() {
				uni.navigateTo({
					url: "/pages/login/auth"
				})
			},
			goSet() {
				uni.navigateTo({
					url: "/pages/sub/user/setting"
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f6f6f6;
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.btn1 {
		line-height: 36rpx;
		background: #F5F5F5;
		border-radius: 106rpx 106rpx 106rpx 106rpx;
		border: 1rpx solid #DDDDDD;
		font-size: 22rpx;
		color: #DDDDDD;
		text-align: center;
		padding: 0 12rpx;
	}

	.btn2 {
		width: 148rpx;
		line-height: 52rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		text-align: center;
		font-size: 24rpx;
		color: #333333;
	}

	.btn3 {
		line-height: 36rpx;
		background: #FFF2D8;
		border-radius: 106rpx 106rpx 106rpx 106rpx;
		border: 1rpx solid #F3AC26;
		font-size: 22rpx;
		color: #F3AC26;
		text-align: center;
		padding: 0 12rpx;
	}

	.card {

		height: 170rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: -250rpx;
		padding: 32rpx 24rpx;
	}

	.card-item {
		text-align: center;
		line-height: 60rpx;

	}
</style>